import { useThemeSettingStore } from "@/stores/themeSettingStore";
import { generateColors, setColors } from "@/utils/color";

export const useGenerateThem = () => {
  const themeStore = useThemeSettingStore();
  const theme = computed(() => themeStore.themeState.theme);
  const originTheme = computed(() => themeStore.themeState.originTheme);

  //采用watchEffect 监听变化

  watchEffect(() => {
    if (theme.value !== originTheme.value) {
      const colors: Record<string, string> = {
        primary: theme.value,
        ...generateColors(theme.value)
      };

      setColors(colors);
      themeStore.changeTheme({ key: "originTheme", value: theme.value });
    }
  });
};
